<template>
	<view class="container" >
		<view class="status_bar">
			<view style="margin-left: 3%;" @tap="goBack()"><u-icon name="arrow-leftward" size='24' /></u-icon></view>
			<view style="font-weight: bold;margin-left: -56upx;">群成员({{originalArray.length}})</view>
			<view></view>
		</view>
		<view class="wrapper">
			<view class="search-box">
				<u-search placeholder="请输入您想搜索的内容" v-model="keyword" :showAction="false" searchIconColor="#373737"
					placeholderColor="#bcbcbc"></u-search>
			</view>
			<!-- <view class="img-value">
				<view v-for="(item,index) in checkListValue" :key="index" class="img-value1">
					<u--image :showLoading="true" :src="item.url" width="80upx" height="80upx"
						radius="10upx"></u--image>
					<view class="delete-btn" @tap="handleDelete(item.id)">
						<u-icon name="minus-circle-fill" size=22 color="#d54827"></u-icon>
					</view>
				</view>
			</view> -->
			<view class="add-box">
				<view class="plus-box"
					@tap="toPage('/pages/contacts/newGroupChat1?type=1&members='+JSON.stringify(info))">
					<u-icon name="plus" size=30 color="#dadada" class="plus-icon"></u-icon>
					<view class="plus-title">添加...</view>
				</view>
				
				<view class="plus-box"
					@tap="toPage('/pages/contacts/newGroupChat1?type=2&members='+JSON.stringify(info))"
					v-if="userId == info.g_owner_user_uid">
					<u-icon name="minus" size=30 color="#dadada" class="plus-icon"></u-icon>
					<view class="plus-title">移除...</view>
				</view>

			</view>
			<view class="face-wrap">
				<view class="face-box" v-for="(item,index) in originalArray" :key="index">
					<!-- <view class="name-img">{{item.nickname}}</view> -->
					<!-- <image :src="`http://chat.zwsmcn.com:8090/rest_post/${item.userAvatarFileName}`"></image> -->
					<image
						:src="`http://chat.zwsmcn.com:8090/UserAvatarDownloader?action=ad&user_uid=${item.user_uid}&user_local_cached_avatar=${item.userAvatarFileName}&enforceDawnload=1`">
					</image>
					<view class="face-box-info">
						<view class="face-box-title">{{item.nickname}}<text
								style="font-size: 24upx; color: #dadada;">离线</text></view>

						<view class="face-box-title">ID：{{item.user_uid}}
							<text
								style="font-size: 24upx; background-color: #dadada; color: #fff;padding:0 5px;border-radius: 3px;margin-left: 5px;"
								v-if="userId == item.user_uid">我</text>
							<text
								style="font-size: 24upx; background-color: #f0ad4e; color: #fff;padding:0 5px;border-radius: 3px;margin-left: 5px;"
								v-if="item.user_uid == info.g_owner_user_uid">群主</text>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startX: 0, // 触摸开始的X坐标
				endX: 0, // 触摸结束的X坐标
				threshold: 50, // 设置滑动多少距离后触发返回
				value1: '哈哈哈@坐席',
				textShow: true,
				originalArray: [],
				groupList: [],
				checkboxValue1: [],
				keyword: '',
				// 基本案列数据
				faceList: [],
				checkListValue: [],
				saveShow: false,
				userId: uni.getStorageSync('userId') || '',
				info: {},
			}
		},
		onLoad(props) {
			this.info = JSON.parse(props.groupId)
			console.log(this.userId);
			console.log(this.info.g_owner_user_uid);

		},
		onShow() {
			this.getfriendlist()
		},
		methods: {
			// 获取群成员
			getfriendlist() {
				// const newDataObj = {
				// 	"user_uid": uni.getStorageSync('user_uid'),
				// };
				// const newDataJsonStr = JSON.stringify(newDataObj)
				const requestData = {
					"processorId": '1016',
					"jobDispatchId": '25',
					"actionId": '9',
					"newData": this.info.g_id
				};
				const requestDataJsonStr = JSON.stringify(requestData);
				uni.request({
					url: 'http://chat.zwsmcn.com:8090/rest_post',
					header: {
						'content-type': 'application/json'
					},
					data: requestDataJsonStr,
					method: 'POST',
					success: res => {
						uni.hideLoading()
						this.originalArray = JSON.parse(res.data.returnValue)
						console.log(this.info)
						console.log(this.originalArray)
					},
					fail: res => {
						console.log(res);
					}
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			
			checkboxChange(e) {
				this.checkListValue = e.detail.value

			},
			//弹框
			recordsClose() {
				this.saveShow = false
			},
			recordsConFirm() {
				this.saveShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.name-img {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		background: #d54827;
		font-size: 36upx;
		text-align: center;
		line-height: 120upx;
		color: #fff;
		margin-left: 10upx;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.status_bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50upx;
	}

	.status_bar,
	.head {
		background-color: #fff;
		height: 160upx;

		.face {
			width: 160upx;
			height: 160upx;
			// border-radius: 10upx;
		}

		.info-name {
			font-size: 40upx;
			font-weight: bold;
		}

		.info-num {
			padding: 2upx 30upx;
			background: #f0f4f7;
			border-radius: 30upx;
			margin-top: 21upx;
		}

		.copybtns {
			color: #4457a4;
			margin-top: 21upx;
		}
	}

	.wrapper {
		width: 92%;
		margin-left: 4%;

		// .select-box {
		// 	margin: 10upx 1% 0 2%;
		// 	display: flex;
		// 	justify-content: space-around;
		// 	align-items: center;
		// }
		.uni-list-cell {
			justify-content: flex-start;
			display: flex;
			align-items: center;
			padding: 30upx;
			margin-top: 30upx;
		}

		.img-value {
			border-radius: 30upx;
			margin-left: 10upx;
			display: flex;
			margin-top: 30upx;

			.img-value1 {
				margin-left: 30upx;
				position: relative;
			}

			.delete-btn {
				position: absolute;
				top: -16%;
				left: 76%;
			}
		}
	}

	.add-box {
		display: flex;
		margin-top: 30upx;

		.plus-box {
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			background: #f5f5f5;
			border: solid 2upx #dadada;
			position: relative;
			margin-left: 30upx;

			.plus-icon {
				position: absolute;
				left: 18upx;
				top: 18upx;
			}

			.plus-title {
				margin-top: 110upx;
				font-size: 26upx;
			}
		}
	}


	.face-wrap {
		width: 96%;
		margin-left: 2%;
		// display: flex;
		// // justify-content: space-around;
		// align-items: center;
		// flex-wrap: wrap;
		// margin-top: 80upx;
		padding-top: 80upx;

		/* 允许自动换行 */
		.face-box {
			// margin-top: 10upx;
			// margin-left: 22upx;
			flex: 1;
			display: flex;
			// flex-direction: column;
			align-items: center;
			margin-top: 10px;

			image {
				width: 100upx;
				height: 100upx;
				border-radius: 20upx;
				background-color: #d54827;
			}

			.face-box-info {
				flex: 1;
				// display: flex;
				margin-left: 10px;

			}

			.face-box-title {
				flex: 1;
				font-size: 26upx;
				/* 设置容器宽度 */
				// width: 100upx;
				// text-align: center;
				/* 设置容器高度 */
				height: 40upx;
				/* 隐藏超出部分 */
				overflow: hidden;
				/* 显示省略号 */
				text-overflow: ellipsis;
				/* 允许文本换行 */
				white-space: normal;

			}
		}
	}
</style>